<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">

        <el-form-item>
          <span>状态：</span>
          <el-radio-group v-model="selectOptions.status" @change="currentStatusChange">
            <el-radio-button v-for="(item, index) in statusMaps" :label="item.value" name="status" :key="index">{{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <div style="display: inline-block;float: right">
          <el-select v-model="selectOptions.query" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-form-item>
            <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="doSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addWorker" icon="plus" style="width: 100px;">新增</el-button>
          </el-form-item>
        </div>
      </el-form>

    </el-col>

    <!--列表-->
    <el-table :data="workers" highlight-current-row v-loading="listLoading"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column label="id" width="60" prop="id">
      </el-table-column>
      <el-table-column label="工作人员头像" width="120">
        <template slot-scope="scope">
          <div class="user-avatar" v-if="scope.row.avatar">
            <a :href="scope.row.avatar" target="_blank"><img :src="scope.row.avatar" alt=""></a>
          </div>
          <div class="user-avatar" v-else>
            <img src="../../../static/images/default.png" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="账户" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" :formatter="workerStatus">
      </el-table-column>
      <el-table-column prop="field_manage_status" label="拍照管理" width="100" :formatter="dayPicStatus">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="login_time" label="登录时间" width="180">
      </el-table-column>
      <el-table-column prop="reg_time" label="注册时间" width="180">
      </el-table-column>
      <el-table-column prop="device_id" label="设备号">
        <template slot-scope="scope">
          <span v-if="scope.row.device_id">{{ scope.row.device_id }}</span>
          <span v-else>未登录</span>
        </template>
      </el-table-column>
      <el-table-column prop="farm_id" label="所属农场" width="120" :formatter="farmName">
    </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="info" size="small" @click="updateWorkerInfo(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteWorker(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑界面-->
    <el-dialog title="编辑工人资料" v-model="editInfoVisible" :close-on-click-modal="false" style="width:1000px;margin: 0 auto;">
      <el-form :model="editInfoForm" label-width="80px" ref="editInfoForm" :rules="formRules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="editInfoForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editInfoForm.password" auto-complete="off" placeholder="*******"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editInfoForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="editInfoForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="editInfoForm.status" on-color="#13ce66" off-color="#ff4949" on-value="1" off-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="拍照管理" prop="field_manage_status">
          <el-switch v-model="editInfoForm.field_manage_status" on-color="#13ce66" off-color="#ff4949" on-value="1" off-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editInfoVisible = false">取消</el-button>
        <el-button type="primary" @click.native="setWorkerInfoSubmit">提交</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog title="新增工人资料" v-model="addInfoVisible" :close-on-click-modal="false" style="width:1000px;margin: 0 auto;">
      <el-form :model="editInfoForm" label-width="80px" ref="editInfoForm" :rules="formRules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="editInfoForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editInfoForm.password" auto-complete="off" placeholder="*******"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editInfoForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="editInfoForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="editInfoForm.status" on-color="#13ce66" off-color="#ff4949" on-value="1" off-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="区域管理" prop="field_manage_status">
          <el-switch v-model="editInfoForm.field_manage_status" on-color="#13ce66" off-color="#ff4949" on-value="1" off-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editInfoVisible = false">取消</el-button>
        <el-button type="primary" @click.native="setWorkerInfoSubmit">提交</el-button>
      </div>
    </el-dialog>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import NProgress from 'nprogress'
	import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        options: [
          {value: 'id', label: '工作人员id'},
          {value: 'phone', label: '手机号'},
          {value: 'name', label: '姓名'},
          {value: 'username', label: '账户'}
        ],
        statusMaps: [
          {value: -1, label: '全部'},
          {value: 1, label: '正常'},
          {value: 0, label: '锁定'}
        ],
        workers: [],
        total: 0,
        listLoading: false,
        editInfoVisible: false,
        addInfoVisible: false,
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : '',
          status: this.$route.query.status !== undefined ? this.$route.query.status : -1
        },
        formRules: {
          'username': [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          'password': [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ],
          'phone': [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          'name': [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
        editInfoForm: {
          id: 0,
          name: '',
          password: '',
          username: '',
          phone: '',
          salt: '',
          status: 1,
          field_manage_status: 1
        }
      }
    },
    methods: {
      // 农场名称
      farmName(row) {
        return row.farm_id === '1' ? '枫泾农场' : '未知农场'
      },
      // 性别显示转换
      formatSex: function (row, column) {
        return row.sex === '1' ? '男' : row.sex === '2' ? '女' : '未知'
      },
      // 状态转换
      workerStatus(row, column) {
        return row.status === '0' ? '锁定' : '正常'
      },
      dayPicStatus(row) {
        return row.field_manage_status === '0' ? '否' : '是'
      },
      // 最后修改土地时间
      updateFieldNameTime(row, column) {
        return util.formatDate.format(new Date(row.last_update_field_name_time * 1000), 'yyyy-MM-dd hh:mm:ss')
      },
      // 注册时间
      regTime(row, column) {
        return util.formatDate.format(new Date(row.regtime * 1000), 'yyyy-MM-dd hh:mm:ss')
      },
      userPosition(row, column) {
        return row.farm_status === '1' ? '农场主' : '普通用户'
      },
      // 改变当前状态
      currentStatusChange() {
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      // 新增工作人员
      addWorker() {
        this.addInfoVisible = true
        this.editInfoForm = {
          id: 0,
          name: '',
          password: '',
          username: '',
          phone: '',
          salt: '',
          status: '1',
          field_manage_status: '1'
        }
      },
      // 修改工作人员信息
      updateWorkerInfo(row) {
        this.editInfoVisible = true
        this.editInfoForm = {
          id: row.id,
          name: row.name,
          password: row.passwd,
          username: row.username,
          phone: row.phone,
          salt: row.salt,
          status: row.status,
          field_manage_status: row.field_manage_status
        }
      },
      // 修改工作人员信息提交
      setWorkerInfoSubmit() {
        if (util.isEmpty(this.editInfoForm.password)) {
          this.$message.error('输入密码！')
          return
        }
        if (!util.isPhone(this.editInfoForm.phone)) {
          this.$message.error('手机格式错误！')
          return
        }
        apiTree('worker/index', 'adminer/setWorkerInfo', this.editInfoForm, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$refs['editInfoForm'].resetFields()
            if (this.editInfoVisible) {
              this.editInfoVisible = false
            } else {
              this.addInfoVisible = false
            }
            this.getWorkers()
          } else {
            this.$message.error(res.err_str)
          }
        })
      },
      // 删除工作人员信息或者锁定工作人员状态
      deleteWorker(_id) {
        this.$confirm('确定删除该工作人员吗', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          NProgress.start()
          let para = {id: _id}
          apiTree('worker/index', 'adminer/deleteWorker', para).then((res) => {
            this.listLoading = false
            NProgress.done()
            if (res.s === 1) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getWorkers()
            }
          })
        }).catch(() => {})
      },
      // 获取用户列表
      getWorkers() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: '',
            status: -1
          }
        }
        this.listLoading = true
        NProgress.start()
        apiTree('worker/index', 'adminer/workerList', para).then((res) => {
          this.workers = res.d.data
          this.total = res.d.total_num
          this.listLoading = false
          NProgress.done()
        })
      }
    },
    created() {
      this.getWorkers()
    },
    watch: {
      $route: 'getWorkers'
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .user-avatar
    width 60px
    height 60px
    border-radius 50%
    & img
      width 100%
      height 100%
      border-radius 50%
  .cell {
    overflow: hidden;
  }
  .name {
    display: block;
    padding-top: 10px;
  }
  .people {
    float: right;
  }
  .user-avatar {
    float: left;
  }
</style>
